<template>
    <view class="navi-card" @click="handleClick">
        <image class="navi-icon" :src="icon" @error="handleError" />
        <text>{{ title }}</text>
    </view>
</template>

<script lang="ts">
import Vue from "vue"

export default Vue.extend({
    props: {
        title: String,
        icon: String,
        navigatePath: String,
    },
    methods: {
        handleClick() {
            this.$emit('click')
        }
    }
})
</script>

<style scoped>
.navi-card {
    width: 330rpx;
    height: 240rpx;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 8rpx 20rpx 0px rgba(9, 36, 66, 0.04);
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(89, 108, 142, 1);
    line-height: 40rpx;
    margin-top: 30rpx;
}

.navi-icon {
    width: 66rpx;
    height: 66rpx;
    margin-bottom: 34rpx;
}
</style>